<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 12:52:12
 * @LastEditTime : 2021-09-06 11:57:43
 * @FilePath     : /newhope/src/page/home/index.vue
 * @Description  : 
-->

<script lang="ts" setup>
import { MyPrize } from "/@/components/index";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useStore } from "vuex";
const router = useRouter();
import clickStart from "/@/assets/images/clickStart.png";
import festival from "/@/assets/images/festival.png";
const showMyPrizeBox = ref(false);
const store = useStore();
function activityRules() {
  router.replace({ name: "gameDescription" });
}
function goGame() {
  if (store.state.user.popUpRule) {
    router.replace({ name: "gameIndex", query: { message: 2 } });
  } else {
    router.replace({ name: "gameDescription", query: { goGame: "true" } });
  }
}
function lookMyPrize() {
  showMyPrizeBox.value = true;
}
function cannel() {
  showMyPrizeBox.value = false;
}
</script>
<template>
  <div class="home">
    <div class="activityRules text" @click="activityRules">活动规则</div>
    <div class="myPrize text" @click="lookMyPrize">我的奖品</div>
    <img alt="点击开始" @click="goGame" class="clickStart buttonInit" :src="clickStart" />
    <img class="festival t" alt="festival" :src="festival" />
    <MyPrize @onClickMask="cannel" v-if="showMyPrizeBox" />
  </div>
</template>

<style lang="scss" scoped>
.t {
  -webkit-animation: slide-in-elliptic-top-fwd 0.7s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateX(-50%) translateY(-600px) rotateX(-30deg)
      scale(0);
    transform: translateX(-50%) translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
    transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateX(-50%) translateY(-600px) rotateX(-30deg)
      scale(0);
    transform: translateX(-50%) translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
    transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}

.buttonInit {
  -webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    both;
  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(-50%) rotate(-4deg);
    transform: translateX(-50%) rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
  80% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }
  90% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: translateX(-50%) rotate(0deg);

    transform: translateX(-50%) rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(-50%) rotate(-4deg);
    transform: translateX(-50%) rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
  80% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }
  90% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}
.text {
  background-color: #ffdb91;
  font-weight: bold;
  line-height: 23px;
  box-shadow: 0px 1px 2px 0px #8a050d;
  border-radius: 0px 5px 5px 0px;
  border: solid 1px #be1728;
  font-family: AlibabaPuHuiTiB;
  font-size: 15px;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #9b0b11;
  box-shadow: 0px 1px 2px 0px #ffd06f;
  text-align: center;
  width: 77px;
  height: 23px;
}
.home {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/homeBkg.jpg");
  background-size: 100% 100%;
  .activityRules {
    position: absolute;
    top: 169px;
    left: 0;
  }
  .myPrize {
    position: absolute;
    top: 203px;
  }
  .clickStart {
    position: absolute;
    bottom: 61px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 32px;
  }
  .festival {
    position: absolute;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
    width: 215px;
    height: 204px;
  }
}
</style>
